<!--
 * @页面名称:查看数据
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="main-box preview_files">
    <splitpanes :dbl-click-splitter="false" style="display: flex">
      <pane min-size="15" size="15">
        <div class="card tree">
          <!-- 搜索栏 -->
          <el-input
            v-model="searchVal"
            style="margin: 5px auto"
            placeholder="请输入想要搜索的内容"
            enter-button
            @change="onSearch"
          />
          <ztree
            style="height: calc(100% - 52px); padding: 5px 8px"
            :setting="treeSetting.setting"
            :nodes="treeSetting.treeData"
            @onCreated="handleCreated"
            @onClick="onClick"
          ></ztree>
        </div>
      </pane>
      <pane min-size="15" size="60">
        <div class="card main_list">
          <a-list item-layout="vertical" size="large" :data-source="listData">
            <template #renderItem="{ item, index }">
              <a-list-item key="item.title" :class="{ listSelected: index == activeIndex }" @click="listClick(item, index)">
                <a-list-item-meta :description="item.description">
                  <template #title>
                    <span style="width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                      {{ item.title }}
                    </span>
                    <component :is="iconType" @click="changeIcon" />
                  </template>
                  <template #avatar>
                    <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" size="large" />
                  </template>
                </a-list-item-meta>
                <div style="display: flex; justify-content: space-between">
                  <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ item.content }}</span>
                  <span style="color: #afa2a2; margin-left: 10px">2024/03/12</span>
                </div>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </pane>
      <pane min-size="20" size="25">
        <div class="card main_right_list">
          <RightList :itemData="itemData"></RightList>
        </div>
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { StarOutlined, StarFilled } from "@ant-design/icons-vue";
import Ztree from "@/components/Ztree/Ztree.vue";
import RightList from "./components/rightList.vue";
import axios from "axios";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "Catalog_ID",
        pIdKey: "Catalog_Father"
      },
      key: {
        name: "Catalog_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [] as any[],
  ztreeObj: {} as any
});
// 左侧树搜索绑定字段
const searchVal = ref("");
// 列表数据
const listData: Record<string, string>[] = [];
for (let i = 0; i < 5; i++) {
  listData.push({
    href: "",
    title: `ant design vue part ${i}`,
    avatar: "https://joeschmoe.io/api/v1/random",
    description: "Ant Design, a design language for background applications, is refined by Ant UED Team.",
    content: "We supply a series of design principles."
  });
}
// 图标类型
const iconType = ref(StarOutlined);
// 图标切换标识
const iconFlag = ref(true);
// 当前点击的列表索引
const activeIndex = ref();
// 当前点击的列表数据
const itemData = ref();
// 获取树数据
const getTreeData = () => {
  axios.get("/catalogData.json").then((res: any) => {
    const result: any[] = [];
    res.data.forEach((item: any) => {
      result.push({ ...item, Catalog_Name: `${item.Catalog_Name}(${item.Count})`, open: item.Catalog_Enable_Expand });
    });
    treeSetting.treeData = result;
  });
};
// 初始化树
const handleCreated = (ztreeObj: any) => {
  treeSetting.ztreeObj = ztreeObj;
};
// 点击树节点
const onClick = (treeNode: any) => {};
// 左侧树搜索事件
const onSearch = () => {
  if (searchVal.value) {
    const nodes = treeSetting.ztreeObj.getNodesByParamFuzzy("Catalog_Name", searchVal.value, null);
    treeSetting.treeData = nodes;
  } else {
    getTreeData();
  }
};
// 切换icon标签状态
const changeIcon = (e: any) => {
  // 阻止父级点击事件
  e.stopPropagation();
  if (iconFlag.value) {
    iconType.value = StarFilled;
  } else {
    iconType.value = StarOutlined;
  }
  iconFlag.value = !iconFlag.value;
};
// list点击事件
const listClick = (item: any, index: number) => {
  activeIndex.value = index;
  itemData.value = item;
};
onMounted(() => {
  getTreeData();
});
</script>

<style scoped lang="scss">
.preview_files {
  height: 100%;
  .tree {
    height: 100%;
    // width: 260px;
    padding: 0;
    // margin-right: 10px;
    overflow: auto !important;
    :deep(#treeDemo) {
      display: flex !important;
    }
  }
  .main_list {
    height: 100%;
  }
  .main_right_list {
    height: 100%;
  }
  .ant-list-item-meta {
    align-items: center;
    :deep(.ant-list-item-meta-title) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      a {
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }
  :deep(.ant-list-item-main) {
    width: 90%;
  }
  :deep(.ant-list-item-extra) {
    margin: 0;
    padding: 0 10px;
  }
  :deep(.ant-list-item-meta-description) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .main_list_extra {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .listSelected {
    background: var(--el-color-primary-light-8);
  }
}
</style>
